<template>
	<view class="pagecon">
		<head-box></head-box>
		<time-selector
		startTime="09:00"
		 endTime="22:30"
		 selectedTabColor="#ff8b2b"
		 selectedItemColor="#ff8b2b" @selectTime="xyb">
		 </time-selector>

		 <view class="front_box">
			 <view class="_main-content-box-item">
				 <view class="_main-item">
				 		<view class="_main-item-chunk _main-item-label"><text class="xing">*</text>预定时间</view>
				 		<view class="_main-item-chunk _main-item-val">{{datetext}}</view>
				 </view>
				 <view class="_main-item" v-if="dataList.length>0">
				 		<view class="_main-item-chunk _main-item-label"><text class="xing">*</text>预定阵地</view>
				 		<view class="_main-item-chunk _main-item-val">{{dataList[0].frontName}}</view>
				 </view>
				<view class="_main-item">
						<view class="_main-item-chunk _main-item-label"><text class="xing">*</text>使用单位</view>
						<view class="_main-item-chunk _main-item-val"> <input cursorSpacing="10"  v-model="applyUnit" class="_main-item-val-input" placeholder="请输入您的单位名称" /></view>
				</view>
				<view class="_main-item">
						<view class="_main-item-chunk _main-item-label"><text class="xing">*</text>联系人</view>
						<view class="_main-item-chunk _main-item-val"> <input cursorSpacing="10"  v-model="applyName" class="_main-item-val-input" placeholder="请输入联系人名称" /></view>
				</view>
				<view class="_main-item">
						<view class="_main-item-chunk _main-item-label"><text class="xing">*</text>联系电话</view>
						<view class="_main-item-chunk _main-item-val"> <input cursorSpacing="10"  v-model="applyTel" class="_main-item-val-input" placeholder="请输入联系电话" /></view>
				</view>
				<view class="_main-item">
						<view class="_main-item-chunk _main-item-label"><text class="xing">*</text>参与人数</view>
						<view class="_main-item-chunk _main-item-val"> <input cursorSpacing="10" type="number"  v-model="useNumber" class="_main-item-val-input" placeholder="请输入参与人数" /><text>人</text></view>
				</view>
				<view class="_main-item">
						<view class="_main-item-chunk _main-item-label"><text class="xing">*</text>用途</view>
						<view class="_main-item-chunk _main-item-val">
								<picker class="_choose-type" ref="dataPicker2" @change="typePicker" :value="typeIndex" :range="typeArr">
									<view class="uni-input _choose-type-text">
										{{typeArr[typeIndex]}}
										<image class="drop-dowm-img" src="/static/img/drop-down.png" mode="widthFix"></image>
									</view>
								</picker>
						</view>
				</view>
				<view>
					<textarea class="textarea" placeholder="请输入您的备注信息" maxlength="200" v-model="note"></textarea>
				</view>
			 </view>
			 <button class="btn" @tap="sub" type="primary">提交审核</button>
		 </view>
		<tabs-box></tabs-box>
	</view>
</template>

<script>
	import { gpFrontlist,gpGpinfo,getDictItems,tRunPossyAduitRecord,gpUserInfo} from '@/common/request.js';
	import { checkMobile } from '@/common/validateIdent.js'
	import timeSelector from '@/components/xiujun-time-selector/index.vue';
	export default {
		data() {
			return {
				startdate:'',
				enddate:'',
				datetext:'未设置预定时间',
				typeIndex:0,
				typeArr:['全部类型'],
				applyUnit:'',
				applyName:'',
				applyTel:'',
				useNumber:'',
				note:'',
				dataList:[],

			};
		},
		components: {timeSelector},
		onLoad(options) {
			this.fronttype();
			this.getfront(options.id);




		},
		onShow()
		{
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
			gpUserInfo().then(res => {
				if(res.success)
				{
					console.log(res);
					//this.saveUserInfo(res.result, this.token);
					console.log(this.userInfo)
					this.applyName = res.result.userPname;
					this.applyTel = res.result.userPhone;
					// this.$api.showinfo(res.result);
				}
			});
		},
		methods:{
			xyb(stat,end,text)
			{
				this.startdate = stat;
				this.enddate = end;
				this.datetext = text;
				console.log(this.startdate,this.enddate);
			},
			typePicker(e){
				this.typeIndex = e.target.value
				//this.frontType = this.typeArrCode[this.typeIndex]
			},
			fronttype(){
				var that = this
				let params = {}
				getDictItems(params,"front_type").then(res =>
				{
					if(res.success)
					{
						res.result.forEach(ele => {
							console.log(ele.text);
							//that.typeArrCode.push(ele.value);
							that.typeArr.push(ele.text);
						})
					}
				})
			},
			sub()
			{
				if(!this.startdate || !this.enddate){
					 return this.$api.msg('请先点选时间!');
				}
				if(this.startdate == this.enddate)
				{
					return this.$api.msg('开始时间必须大于结束时间!');
				}
				if(this.applyUnit.length<5)
				{
					return this.$api.msg('请输入正确的单位名称!');
				}
				if(this.applyName.length<2)
				{
					return this.$api.msg('请输入正确的联系人姓名!');
				}
				if(!checkMobile(this.applyTel)) {
					return this.$api.msg('请输入正确的手机号');
				}
				if(this.useNumber == '0' || this.useNumber ==''){
					return this.$api.msg('请输入正确的参与人数');
				}
				if(this.typeIndex == 0){
					return  this.$api.msg('请选择用途');
				}
				if(this.dataList.length != 1){
					return  this.$api.msg('阵地信息加载错误!');
				}

				var params = {
						"applyName": this.applyName,
						"applyTel": this.applyTel,
						"applyUnit":this.applyUnit,
						"frontId": this.dataList[0].id,
						"note": this.note,
						"serviceDemand": this.typeArr[this.typeIndex],
						"useEndTime": this.enddate,
						"useNumber": this.useNumber,
						"useStartTime": this.startdate
					}

				tRunPossyAduitRecord(params).then(res => {
					console.log(res)
					if(res.success)
					{
						this.$api.msg('提交成功,请等待管理员审核');

						setTimeout(() => {
							uni.navigateTo({
								url:'/pages/index/index'
							})
						}, 1000);
						return;
					}else
					{
						this.$api.msg(res.message);
					}
				});
			},
			getfront(id)
			{
				//this.getfrontlist();
				var that = this;
				let params = {"frontPublic":1,"id":id}
				gpFrontlist(1,1,params).then(res => {
					if(res.success)
					{
						//this.total = res.result.records.length;
						this.dataList = []
						//console.log('==========',res.result.records);
						res.result.records.forEach(ele => {
							//that.getxxlist(ele.frontOpenTime);

							//time='星期一：9:00-17:00   星期二：9:00-17:00   星期三：9:00-17:00   星期四：9:00-17:00   星期五：9:00-17:00   星期六：9:00-17:00   星期天：9:00-17:00   '
							//ele.time = time;
							///static/img/null.png

							ele.frontPic = !!ele.frontPic ? ele.frontPic : '/static/img/null.png';
							this.dataList.push(ele)

						})
						//this.$refs.paging.addData(res.result.records);
					}

					console.log(this.dataList);
				});
			}
		}
	}
</script>

<style lang="scss">
	.pagecon{
		height: 100vh;
		.front_box{
			padding: 0 30rpx;
			.textarea{
				border: 1rpx solid #f3f3f3;
				width: calc(100% - 40rpx);
				font-size: 28rpx;
				padding: 20rpx;
				border-radius: 10rpx;
				margin-top: 20rpx;
				height: 100rpx;
			}
		}
		.btn{
			margin: 20rpx 0 50rpx 0;
			background-color: #ff8b2b;
		}
	}
	.xing{
		font-weight: bold;
		color: red;
		margin-right: 10rpx;
	}

	._main-content-box-item{
		width: 100%;
		._main-item{
			// height: 86rpx;
			border-bottom: 1px solid #f3f3f3;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
			._main-item-chunk{
				font-size: 28rpx;
				color: #000;
				line-height: 84rpx;
			}
			._main-item-label{
				width: 30%;
				min-width: 210rpx;
			}
			._main-item-val{
				width: 70%;
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-end;
				align-items: center;
				line-height: 84rpx;
				height: 84rpx;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
				._main-item-val-head{
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					display: flex;
					.head-img{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				._main-item-val-input{
					text-align: right;
					display: flex;
					height: 100%;
					font-size: 28rpx;
					._main-item-val-input-text{
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
					}
					.drop-dowm-img{
						width: 30rpx;
						height: 30rpx;
						margin-left: 10rpx;
						transform: rotateZ(270deg);
					}
				}
				.drop-dowm-img{
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
					transform: rotateZ(270deg);
				}
			}
		}

		._content-box-item-chunk{
			width: 100%;
			border-bottom: 1px solid rgba(200,199,204,0.2);
			padding-bottom: 33rpx;
			._item-chunk-label{
				font-size: 28rpx;
				color: #000;
				font-weight: 600;
				margin-left: 20rpx;
				line-height: 60rpx;
			}
			._item-chunk-val{
				height: 80rpx;
				background-color: #f6f6f6;
				border-radius: 10rpx;
				font-size: 26rpx;
				color: #000;
				padding: 0 20rpx;
				box-sizing: border-box;
				line-height: 80rpx;
				font-size: 26rpx;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				._item-chunk-val-input{
					width: 100%;
					height: 100%;
					line-height: 80rpx;
					font-size: 26rpx;
				}
				._main-item-val-input{
					text-align: right;
					display: flex;
					width:100%;
					height: 100%;
					/deep/ div{
						// width: 100%;
						// display: flex;
						// flex-wrap: nowrap;
						// justify-content: space-between;
						// align-items: center;
					}
					._main-item-val-input-text{
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
					}
					.drop-dowm-img{
						width: 30rpx;
						height: 30rpx;
						margin-left: 10rpx;
						transform: rotateZ(270deg);
					}
				}
				.drop-dowm-img{
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
					transform: rotateZ(270deg);
				}
				._val-box{
					width: 100%;
					height: 100%;
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					._val-box-input{
						height: 100%;
						line-height: 80rpx;
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>
